<template>
    <van-nav-bar class="title" title="部署者注册产品" />
    <div class="container">
        <div class="add-product">
            <van-field v-model="productName" label="产品名" placeholder="请输入产品名" />
            <van-field v-model="productDescription" label="产品描述" placeholder="请输入产品描述" />
            <van-field v-model="productPrice" label="产品价格(元)" type="number" placeholder="请输入产品价格" />
            <van-button type="primary" @click="registerProduct" :disabled="!productName || !productPrice">
                注册产品
            </van-button>
        </div>
    </div>
</template>

<script>
import { ref } from 'vue';
import useWeb3 from '../util'; // 确保导入 useWeb3
const { web3 } = useWeb3();

export default {
    name: 'AddProduct',
    setup() {
        const productName = ref('');       // 商品名称
        const productDescription = ref(''); // 商品描述
        const productPrice = ref('');       // 商品价格

        // 从 Web3 获取账户和合约
        const { getAccount, ballotSm } = useWeb3();

        const registerProduct = async () => {
            try {
                // 获取当前用户账户
                const account = await getAccount();

                // 获取当前网络的 gasPrice（单位为 wei）
                const gasPrice = await web3.eth.getGasPrice();

                // 创建交易参数
                const txParams = {
                    from: account,
                    gas: 500000, // 设置 gas 限制，根据需要调整
                    gasPrice: gasPrice, // 使用传统的 gasPrice
                };

                // 调用智能合约的 registerProduct 方法
                await ballotSm.methods.registerProduct(
                    productName.value,
                    productDescription.value,
                    productPrice.value
                ).send(txParams);

                // 获取最新的 productCount（即新商品的 ID）
                const productId = await ballotSm.methods.productCount().call();

                alert(`商品部署成功! 产品ID: ${productId}`);
            } catch (error) {
                console.error(error);
                alert('注册商品失败');
            }
        };

        return {
            productName,
            productDescription,
            productPrice,
            registerProduct
        };
    }
};
</script>

<style scoped>
/* 设置全局的 body 和 html 样式 */
body, html {
    margin: 0;
    height: 100%;
}

/* .container 使用 flexbox 居中 */
.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;  /* 使容器占满整个视口 */
}

/* .add-product 设置最大宽度，保证在大屏幕时不超过一定宽度 */
.add-product {
    padding: 20px;
    background-color: white;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 给容器加阴影 */
    border-radius: 8px;
    width: 100%;  /* 让它自适应小屏幕 */
    max-width: 500px;  /* 限制最大宽度 */
}

/* 输入栏之间添加间距 */
.add-product .van-field {
    margin-bottom: 15px; /* 输入框之间的间距 */
}



/* 调整标题的样式 */
.title {
    margin-top: 20px;
}
</style>
